﻿
@{
    //ViewBag.Title = "TaskList";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}

<script type="text/html" id="toolbarTable">
    @*<div class="layui-form layui-form-pane" lay-filter="searchForm">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary layui-border-green" lay-event="add">添加</button>
            </div>
            <div class="layui-inline">
                <input type="text" name="serviceName" placeholder="请输入服务名称" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-event="search">搜索</button>
            </div>
        </div>*@


    <div class="layui-btn-container" style="width: auto;">
        <div class="layui-form-item" style="position: relative;">

            <label class="layui-form-label">服务</label>
            <div class="layui-input-inline">
                <input type="tel" name="serviceName" placeholder="请输入服务名称" autocomplete="off" class="layui-input" style="height: 30px;">
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
            <button class="layui-btn layui-btn-sm" lay-event="add" style="position: fixed;right: 30%;">添加</button>
        </div>
    </div>

</script>

<script type="text/html" id="toolbarCol">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
</script>


<script type="text/html" id="tpltype">
    {{#  if(d.ServiceType == 1){ }}
    宝宝
    {{#  } else if(d.ServiceType == 2){ }}
    美容
    {{#  } else if(d.ServiceType == 3){ }}
    护理
    {{# } }}
</script>



<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">

                    @*<div class="layui-col-lg1 layui-col-lg2">
                        <div id="test13" class="demo-tree-more"></div>
                    </div>*@

                    <div>
                        <table class="layui-hide" id="testta" lay-filter="testta"></table>

                        <script>
                            var table;
                            layui.use(['table', 'util', 'tree', 'form'], function () {
                                var table = layui.table;
                                var util = layui.util;
                                var form = layui.form;

                                // 渲染表格
                                table.render({
                                    elem: '#testta',
                                    url: '/ServiceList/DataList',
                                    toolbar: '#toolbarTable',
                                    defaultToolbar: [],
                                    height: 'full-200',
                                    cellMinWidth: 90,
                                    page: true,
                                    limits: [5, 10, 15, 20],
                                    limit: 10,
                                    cols: [[
                                        { type: 'checkbox', fixed: 'left' },
                                        { field: 'Id', title: 'ID', sort: true, fixed: 'left' },
                                        { field: 'ServiceName', title: '服务名称' },
                                        { field: 'ServicePrice', title: '服务价格' },
                                        { field: 'SerStartTime', title: '(起始周)' },
                                        { field: 'ServiceInterval', title: '服务间隔' },
                                        { field: 'ServiceThreshold', title: '阈值' },
                                        { field: 'ServiceType', title: '服务类型', templet: '#tpltype' },
                                        {
                                            field: 'CreateTime',
                                            title: '创建时间',
                                            templet: function (d) {
                                                const regex = /\/Date\((\d+)\)\//;
                                                const match = d.CreateTime.match(regex);
                                                if (match) {
                                                    return util.toDateString(parseInt(match[1]), 'yyyy-MM-dd HH:mm:ss');
                                                }
                                                return d.CreateTime;
                                            }
                                        },
                                        { field: 'ServiceCount', title: '服务次数' },
                                        { title: '操作', fixed: 'right', width: 155, minWidth: 155, toolbar: '#toolbarCol' }
                                    ]],
                                    done: function (res, curr, count) {
                                        // 表格渲染完成回调
                                    }
                                });

                                // 工具栏事件
                                table.on('toolbar(testta)', function (obj) {
                                    switch (obj.event) {
                                        case 'add':
                                            layer.open({
                                                type: 2,
                                                content: '/ServiceList/Detail',
                                                area: ['1000px', '600px']
                                            });
                                            break;
                                        case 'search':
                                            var serviceName = $('input[name="serviceName"]').val();
                                            table.reload('testta', {
                                                where: {
                                                    serviceName: serviceName
                                                },
                                                page: {
                                                    curr: 1
                                                }
                                            });
                                            break;
                                    }
                                });

                                // 行工具事件
                                table.on('tool(testta)', function (obj) {
                                    switch (obj.event) {
                                        case 'del':
                                            layer.confirm('确定要删除这条记录吗？删除后将无法恢复！', function (index) {
                                                $.post('/ServiceList/DeleteData', { id: obj.data.Id }, function (res) {
                                                    if (res.code == 0) {
                                                        layer.msg('删除成功');
                                                        obj.del();
                                                    } else {
                                                        layer.msg('删除失败: ' + res.msg);
                                                    }
                                                    layer.close(index);
                                                });
                                            });
                                            break;
                                        case 'edit':
                                            layer.open({
                                                type: 2,
                                                content: '/ServiceList/edit/' + obj.data.Id,
                                                area: ['1000px', '600px']
                                            });
                                            break;
                                    }
                                });
                            });
                        </script>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
            <button class="layui-btn layui-btn-sm" id="dropdownButton">
                下拉按钮
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm" id="reloadTest">
                重载测试
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
                <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">
                更多
                <i class="layui-icon layui-icon-down"></i>
            </a>
        </div>
    </script>
</body>

